<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<title>用户管理</title>
	</head>
	<body>
		<div id="app">
			<h1 style="text-align: center;">用户管理</h1>
			<el-table
				ref="multipleTable"
				:data="student_group"
				tooltip-effect="dark"
				style="width: 100%"
				stripe
				border
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
				prop="id"
				label="编号"
				width="100">
				</el-table-column>
				<el-table-column
				prop="name"
				label="姓名"
				width="100">
				</el-table-column>
				<el-table-column
				prop="sex"
				label="性别"
				width="100">
				</el-table-column>
				<el-table-column lable='操作'>
					<template slot='header' slot-scope='slot'>
						操作&nbsp;&nbsp;
						<el-button size='mini' type='primary' @click='addUser'>新增</el-button>
						<el-button size='mini' type='danger' @click='daleteChoosed'>删除所选</el-button>
					</template>
					<template slot-scope='scope'>
						<el-button
						size='mini'
						type='success'
						@click='handleEdit(scope.$index,scope.row)'>编辑</el-button>
						
					
						
						
						
				
						<el-button
									size='mini'
									type='danger'
									@click='handleDelete(scope.$index,scope.row)'>删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						
						
						<el-button  type="text" @click="dialogVisible = true">编辑</el-button>
						<el-dialog
						title="编辑"
						:visible.sync="dialogVisible"
						width="30%"
						:before-close="handleClose">
						<a>姓名</a>
						<el-input v-model="input" placeholder="请输入姓名"
						style='width: 150px;' suffix-icon="el-icon-user-solid"></el-input>
						<a>性别</a>
						<el-select v-model="value" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
							
						
						    </el-option>
						  </el-select>
						  
						
						<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
						</span>
						</el-dialog>
						

			
		</div>
		<script>
			function Student(id,name,sex){
				this.id=id;
				this.name=name;
				this.sex=sex;
			}
			
		new Vue({
			el:"#app",
		
			data:{
					input:'',
					radio_id:'',
					radio_name:'',
					radio_sex:'',
					sex_group:['男','女'],
					student_group:[{
						id:'1',
						name:'张三',
						sex:'男',
					},{
						
					}],
					selections:[]
				},
					
				methods:{
					addUser:function(){
						let student=new Student(
							this.input,
							this.radio_id,
							this.radio_name,
							this.radio_sex,
							this.sex_group
						);
						this.student_group.push(student);
					},
					daleteChoosed:function(scope){
						let i=scope.$index;
						this.student_group.splice(i,1);
					},
					handleSelectionChange:function(val){
						this.selections=val;
						console.log(val);
					}
				},
				data() {
				    return {
				      dialogVisible: false
				    };
				  },
				  methods: {
				    handleClose(done) {
				      this.$confirm('确认关闭？')
				        .then(_ => {
				          done();
				        })
				        .catch(_ => {});
				    }
				  }
				
					  
			})
				
				  		  
			 			   
			
		
			  
		</script>
	</body>
</html>
